<template>
  <CustomNav title="李女士"></CustomNav>
  <view class="main">
    <u-image
      :show-loading="true"
      src="http://sns-webpic-qc.xhscdn.com/202404251045/33e893ba24a5a0f7bf5451fb4f9e7a0f/1040g008311q0beqm0i605p13mp1ki0801mv0g5g!nd_dft_wlteh_webp_3"
      width="100vw"
      height="70vh"
    ></u-image>
  </view>

  <view class="photoList">
    <scroll-view scroll-x>
      <view style="display: flex; align-items: center">
        <view
          class="row"
          v-for="(item, index) in photoList"
          :key="index"
          @click="active = index"
        >
          <!-- <u-image
            :show-loading="true"
            :src="item.url"
            :width="item.index == active ? '200rpx' : '180rpx'"
            :height="item.index == active ? '200rpx' : '180rpx'"
            radius="16rpx"
          ></u-image> -->
          <u-image
            :show-loading="true"
            :src="item.url"
            :width="item.index == active ? '200rpx' : '180rpx'"
            :height="item.index == active ? '200rpx' : '180rpx'"
            radius="16rpx"
          ></u-image>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";

const active = ref(0);
const photoList = ref([
  {
    index: 0,
    url: "https://cdn.uviewui.com/uview/album/1.jpg",
  },
  {
    index: 1,
    url: "https://cdn.uviewui.com/uview/album/1.jpg",
  },
  {
    index: 2,
    url: "https://cdn.uviewui.com/uview/album/1.jpg",
  },
  {
    index: 3,
    url: "https://cdn.uviewui.com/uview/album/1.jpg",
  },
  {
    index: 4,
    url: "https://cdn.uviewui.com/uview/album/1.jpg",
  },
  {
    index: 5,
    url: "https://cdn.uviewui.com/uview/album/1.jpg",
  },
]);
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.photoList {
  // padding: 0 30rpx;

  scroll-view {
    white-space: nowrap;
    position: fixed;
    bottom: 30rpx;
  }

  .row {
    display: inline-block;
    width: 180rpx;
    height: 180rpx;
    margin-right: 20rpx;
    margin-left: 20rpx;

    :deep(image) {
      transition: all 0.3s;
    }
  }
}
</style>
